<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <u-navbar :fixed="true" :safeAreaInsetTop="true" :placeholder="true" @leftClick="back" title="人员管理"></u-navbar>
        <uni-select class="uniselect" ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select"></uni-select>
        <view style="height:74rpx"></view>

        <view class="uni-area">
            <!-- 人员信息 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="人员信息"/>
                <view style="height:550rpx" class="u-flex u-row-center">
                    <!-- 不根据角色区分接口,故根据接口返回数量的长度区分 -->
                    <qiun-data-charts type="line" v-if="memberData.categories.length!=0" 
                        :ontouch="true" :canvas2d="true"
                        :opts="memberData.categories.length>5?memberData.opts:{}"
                        :chartData="memberData" />
                    <u-loading-icon v-else text="加载中" textSize="18"></u-loading-icon>
                </view>
            </view>
            <!-- 人员概览 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10" @tap.stop="goStaffList">
                <qiun-title-bar title="人员概览"/>
                <u-row customStyle="flex-wrap:wrap;padding-left:20rpx">
                    <u-col :span="item.span" v-for="(item,index) in overviewArr" :key="index" 
                        class="u-m-t-20 u-font-26" style="flex-direction:row">
                        <text class="u-m-r-14 uni-gery-color">{{item.title}}</text>
                        <text>{{item.value}}</text>
                    </u-col>
                </u-row>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 下拉选择数据
				selectData:[
                    { label: "属地区划", list: [], show: false, type: "districtId", value: '' },
                ],
                // 人员信息
                memberData:{
                    categories:[], // '住建','水利','交通','农村农业','其它'
                    series:[
                        // {
                        //     "name": "实名制进场人数",
                        //     "data": [35,8,25,37,88]
                        // },
                        // {
                        //     "name": "考勤总人数",
                        //     "data": [ 70, 40, 65, 100,88]
                        // },
                    ],
                    opts:{ 
                        xAxis:{
                            itemCount: 3,
                            rotateLabel: false,
                            scrollShow:true,
                            disableGrid:true
                        },
                        yAxis: {
                            showTitle:true,
                            data: [
                                {
                                    position: 'left',
                                    title: '实名制进场人数',
                                    titleOffsetX: 45,
                                    titleOffsetY: -8,
                                }, 
                                {
                                    position: 'right',
                                    title: '考勤总人数',
                                    titleOffsetX: -30,
                                    titleOffsetY: -8,
                                }
                            ]
                        },
                        enableScroll: true
                    }
                },
                overviewArr:[
                    { field:'districtName', title:'区划', span:12, value:'安薪乐' },
                    { field:'smrztaffs', title:'实名制人数', span:12, value:'安薪乐' },
                    { field:'sglrytaffs', title:'项目管理人数', span:6, value:'安薪乐' },
                    { field:'swgrytaffs', title:'务工人数', span:6, value:'安薪乐' },
                    { field:'istaffs', title:'进场人数', span:12, value:'安薪乐' },
                    { field:'jglrytaffs', title:'项目管理人数', span:6, value:'安薪乐' },
                    { field:'jwgrytaffs', title:'务工人数', span:6, value:'安薪乐' },
                ],
			}
		},

		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                // 人员信息图表
                this.getStaffInfoEcharts()
                // 人员概览
                this.getStaffOverview()
            })
		},


		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },

            // 人员信息图表---不用根据角色(兵团&师级)分开调用接口,现有接口返回了不同数据
            getStaffInfoEcharts(){
                this.memberData.categories = []
                this.memberData.series = [
                    { index: 0, name: "实名制进场人数", data: [] },
                    { index: 1, name: "考勤总人数", data: [] },
                ]
                this.$request(this,this.$apis.staffInfoEcharts,{districtId:this.selectData[0].value}).then(res=>{
                    // console.log('人员信息图表',res)
                    res.map((v,i)=>{
                        this.memberData.categories.push(v.districtName?v.districtName:v.projectType)
                        this.memberData.series[0].data.push(v.staffs) // 实名制进场人数
                        this.memberData.series[1].data.push(v.atdStaffs) // 考勤总人数
                    })
                }).then()
            },


            // 人员概览
            getStaffOverview(){
                this.overviewArr.map((v,i)=>{
                    if( i==0 ){
                        v.value = this.selectData[0].label
                    }else{
                        v.value = '安薪乐'
                    }
                })
                this.$request(this,this.$apis.kqStaffsStatistics,{districtId:this.selectData[0].value}).then(res=>{
                    // console.log('人员概览',res)
                    this.overviewArr.map((v,i)=>{
                        if( i==0 ){
                            v.value = this.selectData[0].label
                        }else{
                            v.value = res[v.field]+'人'
                        }
                    })
                }).then()
            },


            // 人员列表
            goStaffList(){
                uni.navigateTo({
                    url: '/pages/member-bag/list?districtId='+this.selectData[0].value
                })
            },


            // 下拉选择
            select(){
                this.getStaffInfoEcharts()
                this.getStaffOverview()
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
    }
</style>
